<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-steps :active="step" finish-status="success">
          <el-step title="基本信息"></el-step>
          <el-step title="榜单成员属性"></el-step>
          <el-step title="保存完成"></el-step>
        </el-steps>
      </el-col>
      <el-col :span="24" v-show="step == 0">
        <el-card class="box-card" style="width: 80%; margin: 20px auto">
          <el-form
            ref="clubMemberForm"
            :model="clubMember"
            label-width="120px"
            :rules="clubMemberInfoRules"
          >
            <el-form-item label="榜单成员名" prop="memberName">
              <el-input v-model="clubMember.memberName"></el-input>
            </el-form-item>
            <el-form-item label="成员简介" prop="summary">
              <el-input v-model="clubMember.summary"></el-input>
            </el-form-item>
            <el-form-item label="选择分类" prop="catId">
              <category-cascader></category-cascader>
            </el-form-item>
            <el-form-item label="选择榜单" prop="clubId">
              <club-select></club-select>
            </el-form-item>
            <el-form-item label="详细内容" prop="content">
              <el-input v-model="clubMember.content"></el-input>
            </el-form-item>

            <el-form-item label="封面" prop="picture">
              <single-upload v-model="clubMember.picture"></single-upload>
            </el-form-item>
            
              
      <el-form-item>
          <el-button type="success" @click="collectClubMemberBaseInfo"
                >下一步：设置基本参数</el-button
              >
          </el-form-item>
          </el-form>
          
        </el-card>
      </el-col>
      <el-col :span="24" v-show="step == 1">
        <el-card class="box-card" style="width: 80%; margin: 20px auto">
          <el-tabs tab-position="left" style="width: 98%">
            <el-tab-pane
              :label="group.groupName"
              v-for="(group, gidx) in dataResp.groups"
              :key="group.groupId"
            >
              <!-- 遍历属性,每个tab-pane对应一个表单，每个属性是一个表单项  clubMember.attrs[0] = [{attrId:xx,val:}]-->
              <el-form ref="form" :model="clubMember">
                <el-form-item
                  :label="attr.attrName"
                  v-for="(attr, aidx) in group.attrs"
                  :key="attr.attrId"
                >
                  <el-input
                    v-model="dataResp.attrs[gidx][aidx].attrId"
                    type="hidden"
                    v-show="false"
                  ></el-input>
                  <el-select
                    v-model="dataResp.attrs[gidx][aidx].attrValue"
                    :multiple="attr.valueType == 1"
                    filterable
                    allow-create
                    default-first-option
                    placeholder="请选择或输入值"
                  >
                    <el-option
                      v-for="(val, vidx) in attr.valueSelect.split(';')"
                      :key="vidx"
                      :label="val"
                      :value="val"
                    ></el-option>
                  </el-select>
                </el-form-item>
                
              </el-form>
            </el-tab-pane>
          </el-tabs>
          <el-form>
          <el-form-item label="是否直接发布" prop="isPublish">
        <el-switch
          v-model="clubMember.isPublish"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </el-form-item>
      </el-form>
          <div style="margin: auto">
            <el-button type="primary" @click="step = 0">上一步</el-button>
          <el-button type="success" @click="submitClubMember"
            >下一步：保存榜单成员信息</el-button
          >
          </div>
        </el-card>
      </el-col>
      <el-col :span="24" v-show="step == 2">
        <el-card class="box-card" style="width: 80%; margin: 20px auto">
          <h1>保存成功</h1>
          <el-button type="primary" @click="addAgian">继续添加</el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import CategoryCascader from "../common/category-cascader";
import ClubSelect from "../common/club-select";
import SingleUpload from "@/components/upload/singleUpload";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { CategoryCascader, ClubSelect, SingleUpload },
  props: {},
  data() {
    return {
      catPathSub: null,
      clubIdSub: null,
      uploadDialogVisible: false,
      step: 0,
      //memberName  summary  catId  clubId  isPublish  picture  attrs
      clubMember: {
        //要提交的数据
        memberName: "",
        summary: "",
        catId: 0,
        clubId: "",
        content: "",
        isPublish: 1,
        picture: "", //封面

        attrs: [], //基本属性
      },
      clubMemberInfoRules: {
        memberName: [
          { required: true, message: "请输入商品名字", trigger: "blur" },
        ],
        summary: [
          { required: true, message: "请编写一个简单描述", trigger: "blur" },
        ],
        catId: [{ required: true, message: "请选择一个分类", trigger: "blur" }],
        clubId: [
          { required: true, message: "请选择一个品牌", trigger: "blur" },
        ],
        content: [
          { required: true, message: "请上传商品详情图集", trigger: "blur" },
        ],
        images: [
          { required: true, message: "请上传商品图片集", trigger: "blur" },
        ],
        isPublish: [
          {
            required: true,
            message: "发布状态不能为空",
            trigger: "blur"
          }
        ],
      },
      dataResp: {
        //后台返回的所有数据
        groups: [],
        attrs: [],
        saleAttrs: [],
        tempSaleAttrs: [],
        tableAttrColumn: [],
        memberLevels: [],
        steped: [false, false, false],
      },
      inputVisible: [],
      inputValue: [],
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {

  },
  //方法集合
  methods: {
    addAgian() {
      this.step = 0;
      this.resetSpuData();
    },
    resetSpuData() {
      this.clubMember = {
        //要提交的数据
        memberName: "",
        summary: "",
        catId: 0,
        clubId: "",
        content: "",
        isPublish: 1,
        picture: "", //封面

        attrs: [], //基本属性
      };
    },

    
    collectClubMemberBaseInfo() {
      //clubMemberForm
      this.$refs.clubMemberForm.validate((valid) => {
        if (valid) {
          this.step = 1;
          this.showAttrs();
        } else {
          return false;
        }
      });
    },
    
    
    

    showAttrs() {
      if (!this.dataResp.steped[0]) {
        this.$http({
          url: this.$http.adornUrl(
            `/rank/attrgroup/${this.clubMember.catId}/withattr`
          ),
          method: "get",
          params: this.$http.adornParams({}),
        }).then(({ data }) => {
          console.log("data.data:",data.data);
          //先对表单的attrs进行初始化
          data.data.forEach((item) => {
            let attrArray = [];
            item.attrs.forEach((attr) => {
              attrArray.push({
                attrId: attr.attrId,
                attrValue: "",
              });
            });
            this.dataResp.attrs.push(attrArray);
          });
          this.dataResp.steped[0] = 0;
          this.dataResp.groups = data.data;
        });
      }
    },

    submitClubMember() {
      //把页面绑定的所有attr处理到clubMember里面,这一步都要做
      this.clubMember.attrs = [];
      this.dataResp.attrs.forEach((item) => {
        item.forEach((attr) => {
          let { attrId, attrValue, showDesc } = attr;
          //跳过没有录入值的属性
          if (attrValue != "") {
            if (attrValue instanceof Array) {
              //多个值用;隔开
              attrValue = attrValue.join(";");
            }
            this.clubMember.attrs.push({ attrId, attrValue, showDesc });
          }
        });
      });
      console.log("attrs", this.clubMember.attrs);
      console.log("~~~~~", JSON.stringify(this.clubMember));
      this.$confirm("将要提交商品数据，需要一小段时间，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          
          this.$http({
            url: this.$http.adornUrl("/rank/clubmember/save"),
            method: "post",
            data: this.$http.adornData(this.clubMember, false),
          }).then(({ data }) => {
            if (data.code == 0) {
              this.$message({
                type: "success",
                message: "新增商品成功!",
              });
              this.step = 2;
            } else {
              this.$message({
                type: "error",
                message: "保存失败，原因【" + data.msg + "】",
              });
            }
          });
        })
        .catch((e) => {
          console.log(e);
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.catPathSub = PubSub.subscribe("catPath", (msg, val) => {
      this.clubMember.catId = val[val.length - 1];
    });
    this.clubIdSub = PubSub.subscribe("clubId", (msg, val) => {
      this.clubMember.clubId = val;
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {
    PubSub.unsubscribe(this.catPathSub);
    PubSub.unsubscribe(this.clubIdSub);
  }, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>